<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/Mytremolo.css">
    <link rel="stylesheet" href="font/download/font_mm32tcpdze/iconfont.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <title>我的抖音号</title>
    <script>
        window.onload = window.onresize = function(){		 
            var view_width = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
            //找到标签名为html的第一个
            var _html = document.getElementsByTagName('html')[0];
            //如果屏幕宽度大于640 
            //就用 640/16=40
            //小于640的时候 不确定 也是尺寸/40
            view_width>640?_html.style.fontSize = 640 / 16 + 'px':_html.style.fontSize = view_width / 16 + 'px';
            //最大网页尺寸640 
            //最大字体（根字体大小） 40
        }
    </script>
</head>
<body>
<header>
    <div class="top">
        <p class="p1 fl"><a href="main.html">&lt;</a></p>
        <p class="p2 fl">我的抖音号</p>
    </div>
</header>     
<div class="content">
    <ul class="ul1">
        <li><span class="fl">抖音账户：</span><p class="fr">葛小伦</p></li>
        <li><span class="fl">抖音名称：</span><p class="fr">Gexiaolun</p></li>
        <li><span class="fl">抖音数量：</span><p class="fr">10000W</p></li>
        <li class="li4"><span class="fl">抖音链接：</span><p class="fr">https://org.modao.cc/app/<br>hgaoi1o8hpek1</p></li>
    </ul>
    <div class="center">
        <p class="p1">属性：</p>
        <ul class="ul2">
            <li>美食</li>
            <li>居家日用</li>
            <li>美妆</li>
            <li>种草带货</li>
        </ul>
    </div>
    <div class="bottom">
        <p class="p1">账户简介：</p>
        <p class="p2">粉赞比排名靠前的大多是娱乐明星以及媒体、平台的官方账号，例如「新华网」「抖音小助手」 。而除去这些账号，粉赞比高于平均值的主要为知识类、才艺类和剧情类。</p>
    </div>
</div>
<footer>
    <p><a href="###" id="a1">新增抖音号</a></p>
</footer>

<div class="content2" id="content2">
    <div class="top">
        <p class="p1">修改手机</p>
        <p class="p2"><a href="###" id="x">x</a></p>
    </div>
    <ul class="ul1">
        <li><span class="fl">抖音账户：</span><input type="text" value="输入抖音账户" class="fr"></li>
        <li><span class="fl">抖音名称：</span><input type="text" value="输入抖音名称" class="fr"></li>
        <li><span class="fl">粉丝数量：</span><input type="text" value="输入抖音数量" class="fr"></li>
        <li><span class="fl">抖音链接：</span><input type="text" value="输入抖音链接" class="fr"></li>
    </ul>
    <div class="center">
        <p class=p1>账户简介：</p>
        <textarea  rows="5">
            在这里输入简介
        </textarea>
    </div>
    <div class="shuxing">
        <p><span>抖音属性：</span><a href="###">点击添加抖音属性</a></p>
        <div class="center1">
            <ul class="ul3" id="ul3">
                <li class="active">美食</li>
                <li>居家日用</li>
                <li>美妆</li>
                <li>种草带货</li>
            </ul>
            <ol class="ol1" id="ol1">
                <li class="show">x</li>
                <li>x</li>
                <li>x</li>
                <li class="">x</li>
            </ol>
        </div>
        <div class="center2">
            <ul class="ul4" id="ul4">
                <li class="active">真人出镜</li>
                <li>剧情</li>
                <li>搞笑段子</li>
                <li>探店</li> 
            </ul>
            <ol class="ol2" id="ol2">
                <li class="show">x</li>
                <li>x</li>
                <li>x</li>
                <li>x</li>
            </ol>
        </div>
    </div>
    <div class="bottom">
        <p><a href="Mytremolo.html">确定</a></p>
    </div>
</div> 
<div class="box" id="box"></div>
 
    <script>
        var ul3 = document.getElementById('ul3')
        var li1 = ul3.getElementsByTagName('li')
        var ol1 = document.getElementById('ol1')
        var li2 = ol1.getElementsByTagName('li')
            for(i=0;i<li1.length;i++){
                li1[i].index = i
                li1[i].onclick = function(){
                    this.className = 'active'
                    li2[this.index].className ='show'
                }
            }
            for(i=0;i<li2.length;i++){
                li2[i].index = i
                li2[i].onclick = function(){
                    this.className =''
                    li1[this.index].className = ''
               }
            }
          
        var ul4 = document.getElementById('ul4')
        var li3 = ul4.getElementsByTagName('li')
        var ol2 = document.getElementById('ol2')
        var li4 = ol2.getElementsByTagName('li')
            for(i=0;i<li3.length;i++){
                li3[i].index = i
                li3[i].onclick = function(){
                    this.className = 'active'
                    li4[this.index].className = 'show'
                 }
            }
            for(i=0;i<li4.length;i++){
                li4[i].index = i
                li4[i].onclick = function(){
                    this.className =''
                    li3[this.index].className = ''
                }
            }
       
       var content2 = document.getElementById('content2')
       var x = document.getElementById('x')
       var a1 = document.getElementById('a1')
       var box = document.getElementById('box')
          
            a1.onclick = function(){
                content2.style.display = 'block'
                box.style.display = 'block'
            }
            x.onclick = function(){
                content2.style.display = 'none'
                box.style.display = 'none'
            }
    </script>

</body>
</html>